<template>
  <Header :showLogo="showLogo"></Header>
  <div class="loginCenter">
    <div class="main">
      <div class="Img">
        <img class="loginCenterImg" src="@/static/images/网易.png" alt="" />
      </div>
      <div class="filed">
        <van-form @submit="login">
          <van-cell-group inset>
            <van-field
              v-model="loginParams.phone"
              name="validator"
              label="账号"
              placeholder="账号/手机号"
              :rules="[{ validator, message: '请填写用户名' }]"
            />
            <van-field
              v-model="loginParams.password"
              type="password"
              name="valiPassword"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="danger" native-type="submit"> 提交 </van-button>
          </div>
        </van-form>
      </div>
      <div class="problem">
        <div>
          没有账号?去<a style="margin-left: 3px" @click="$router.push('/register')">注册</a>
        </div>
      </div>
      <!-- <div>
        <van-button type="danger" size="large" @click="login" class="btn">登录</van-button>
      </div> -->
      <div class="controls">
        <input class="inp" name="协议" type="checkbox" :checked="isAgree" v-model="isAgree" />
        <span class="text">同意《服务条款》和《隐私政策》和《网易严选服务协议》</span>
        <span class="error-msg"></span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import userApi from '@/api/userInfo'
import { useUserInfoStore } from '@/stores/userInfo'
import { useRoute } from 'vue-router'
export default defineComponent({
  name: 'loginCenter'
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'
import { showDialog, showToast } from 'vant'

const showLogo = ref(false)

// 正则表达式验证手机号
const validator = (val: any) =>
  /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/.test(val)

// 验证数据
const isAgree = ref()
const loginParams = ref({
  phone: '',
  password: ''
})

// 账号登陆
const route = useRoute()
const login = async () => {
  const params = loginParams.value
  if (isAgree.value) {
    try {
      const res = await userApi.Login(params)
      if (res.code === 200) {
        if (route.query.redirect) {
          const routes = route.query.redirect
          router.push(routes as string)
        }else{
          router.push('/')
        }
        useUserInfoStore().getUserInfo()
        localStorage.setItem('token_key', res.data.token)
      } else {
        showDialog({
          title: '标题',
          message: '账号或密码错误，请重新登录。'
        }).then(() => {
          // on close
        })
      }
    } catch (error) {}
  } else {
    showToast('请选择协议')
  }
}
</script>

<style lang="less" scoped>
.loginCenter {
  height: 100%;
  margin-top: 80px;
  // display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  text-align: center;
  .main {
    margin-top: 30px;
    .Img {
      .loginCenterImg {
        height: 45px;
        width: 134px;
      }
    }
    .filed {
      margin-top: 30px;
        .top{
          .phone{
            // margin-top: 30px;
            border-bottom: 1px solid #d9d9d9;
          }
          .password{

            border-bottom: 1px solid #d9d9d9;

          }
        }
      }

    .problem{
      font-size: 15px;
      color: #7f7f7f;
      // float: left;
      margin: 20px ;
      text-align: left;
      width: 95%
      // clear: both;
    }

    .btn{
      width: 90%;

      margin-bottom: 20px;
      height: 47px;
      background-color: #dd1a21;
    }

    .controls{
      font-size: 10px;
      .text{
        color:#007AFF
      }
    .inp{
      margin-top: 1;
    }
    }
  }

}
</style>
